i <template>
  <div class="bg-white rounded-xl shadow-md p-3">
    <div class="flex justify-between items-center mb-3">
      <h3 class="text-xl font-semibold text-gray-800">社区热度排行</h3>

      <!-- 分页信息 -->
      <div class="text-sm text-gray-700">
        {{ currentPage }}/{{ totalPages }}
      </div>
    </div>

    <div class="space-y-2">
      <div
          v-for="community in paginatedCommunities"
          :key="community.id"
          class="flex items-center space-x-3 cursor-pointer rounded-lg p-2 transition-all duration-200 transform community-item"
          @click="handleCommunityClick(community.id)"
      >
        <!-- 社区头像和排名标识 -->
        <div class="relative flex-shrink-0">
          <!-- 社区头像 -->
          <div class="w-11 h-11 rounded-full overflow-hidden shadow-sm border border-white">
            <img :src="community.avatar" :alt="community.name" class="w-full h-full object-cover">
          </div>
          
          <!-- 排名标识 -->
          <div
              class="absolute -top-2 -left-2 w-7 h-7 flex items-center justify-center rounded-full text-white font-bold shadow-lg border-2 border-white transform transition-transform duration-300 hover:scale-110"
              :class="[
                community.rank <= 3 ? community.rankStyle.background : 'bg-gradient-to-br from-gray-300 to-green-300',
                community.rank <= 3 ? 'animate-pulse-slow' : ''
              ]"
              :title="`排名第${community.rank}位`"
          >
            <template v-if="community.rank <= 3">
              <i :class="'fa ' + community.rankStyle.icon + ' text-[10px]'"></i>
            </template>
            <template v-else>
              {{ community.rank }}
            </template>
          </div>
        </div>
        
        <!-- 社区信息 -->
        <div class="min-w-0 flex-grow">
          <h4 class="text-sm font-medium text-gray-800 truncate">{{ community.name }}</h4>
          <div class="flex items-center text-[10px] text-gray-500 mt-0.5">
            <!-- 热度值 -->
            <div class="flex items-center">
              <i class="fa fa-fire text-orange-500 mr-0.5"></i>
              <span>{{ community.heatLevel }}</span>
            </div>
            
            <!-- 分隔点 -->
            <div class="w-0.5 h-0.5 rounded-full bg-gray-300 mx-1"></div>
            
            <!-- 成员数 -->
            <div class="flex items-center">
              <i class="fa fa-users text-blue-500 mr-0.5"></i>
              <span>{{ community.members }}</span>
            </div>

            <!-- 分隔点 -->
            <div class="w-0.5 h-0.5 rounded-full bg-gray-300 mx-1"></div>
            
            <!-- 帖子数 -->
            <div class="flex items-center">
              <i class="fa fa-comment text-purple-500 mr-0.5"></i>
              <span>{{ community.posts }}</span>
            </div>
          </div>
        </div>
        
        <!-- 右侧箭头 -->
        <div class="text-gray-300 arrow-icon text-[10px]">
          <i class="fa fa-chevron-right"></i>
        </div>
      </div>
    </div>
    
    <!-- 分页控制 -->
    <div class="flex justify-center items-center mt-4 space-x-4">
      <button 
        @click="prevPage" 
        class="w-9 h-9 rounded-full flex items-center justify-center transition-colors duration-200"
        :class="currentPage > 1 ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 cursor-not-allowed'"
        :disabled="currentPage <= 1"
      >
        <i class="fa fa-chevron-left text-sm"></i>
      </button>
      
      <button 
        @click="nextPage" 
        class="w-9 h-9 rounded-full flex items-center justify-center transition-colors duration-200"
        :class="currentPage < totalPages ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 cursor-not-allowed'"
        :disabled="currentPage >= totalPages"
      >
        <i class="fa fa-chevron-right text-sm"></i>
      </button>
    </div>
  </div>
</template>

<script>
import { communityRankingData } from "@/mock/communityRankingData";

export default {
  name: "CommunityRanking",
  data() {
    return {
      communityRankings: communityRankingData,
      currentPage: 1,
      itemsPerPage: 10
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.communityRankings.length / this.itemsPerPage);
    },
    paginatedCommunities() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.communityRankings.slice(start, end);
    }
  },
  methods: {
    handleCommunityClick(communityId) {
      // 处理社区点击事件
      console.log(`点击了社区ID: ${communityId}`);
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    }
  }
};
</script>

<style scoped>
.community-item {
  border-left: 3px solid transparent;
}

.community-item:hover {
  background-color: #f9f7ff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-left-color: #91f0d0;
}

.community-item:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.community-item:hover .arrow-icon {
  color: #8e9c96;
  transform: translateX(2px);
}

.arrow-icon {
  transition: all 0.2s ease;
}

/* 自定义缓慢脉动动画 */
@keyframes pulse-slow {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  50% {
    opacity: 0.9;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);
  }
}

/* 前三名特殊效果 */
[class*="from-yellow-400"] {
  box-shadow: 0 0 10px 2px rgba(251, 191, 36, 0.6);
}

[class*="from-gray-400"] {
  box-shadow: 0 0 10px 2px rgba(156, 163, 175, 0.6);
}

[class*="from-amber-700"] {
  box-shadow: 0 0 10px 2px rgba(180, 83, 9, 0.6);
}
</style>